<style lang="less">
@import "../styles/common.less";
@import "./index.less";
</style>
<style>
</style>
<template>
  <div class="user-list-div">
    <div class="table-head" v-show="selectionArr.length == 0">
      <div class="left" @keydown.enter="searchFun">
        <Input v-model="search_name" size="default" placeholder="姓名" />
      </div>
      <div class="left-btn">
        <Button type="text" icon="ios-search" class="mangerButton4" @click="searchFun()">搜索</Button>
      </div>
      <Button type="primary" class="Button" @click="addUser()">添加</Button>
      <Button type="text" icon="ios-cloud-upload" class="Button" @click="importData()">导入</Button>
      <a href="/vendors/Excel/user.xlsx" download="用户信息.xlsx">
        <Button type="text" icon="ios-document" class="Button">模板</Button>
      </a>
      <Button
        type="text"
        icon="ios-cloud-download"
        class="Button"
        @click="ExportData()"
        v-if="data.length > 0"
      >导出</Button>
    </div>
    <div class="table-head" v-show="selectionArr.length > 0">
      <div class="left-nums">选中 {{selectionArr.length}} 条 / 共 {{data.length}} 条</div>
      <div class="left-btn">
        <Button type="error" class="Button" @click="removeUser()">删除</Button>
      </div>
      <div class="left-btn">
        <Button
          type="warning"
          class="Button"
          @click="updateFun()"
          :disabled="selectionArr.length == 1 ? false : true"
        >修改</Button>
      </div>
      <Button type="text" class="Button" @click="hideNums()">取消</Button>
    </div>
    <Row class="margin-top-10">
      <Table
        stripe
        border
        :columns="columns"
        :data="data"
        @on-row-click="onRowData"
        @on-selection-change="selectionChange"
        :height="TableHeight"
        ref="selectionTable"
      ></Table>
      <div style="margin: 10px;overflow: hidden;height: 36px;">
        <div style="float: right;">
          <Page :total="total" :current="page" @on-change="changePage" show-elevator></Page>
        </div>
      </div>
    </Row>

    <!--编辑信息-->
    <Modal
      v-model="addCurrentTableData"
      :closable="false"
      :mask-closable="false"
      :width="600"
      class-name="vertical-center-modal"
      class="Modal-Detail-div"
    >
      <h3 slot="header" style="color:#2D8CF0">编辑用户信息</h3>
      <Form :label-width="100" label-position="right">
        <FormItem label="所在部门">
          <Select v-model="addData.dids" multiple :transfer="true" style="width:100%;">
            <Option v-for="item in depList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem label="是否为管理员">
          <Select v-model="addData.is_admin" :transfer="true" style="width:100%;">
            <Option v-for="item in is_adminArr" :value="item.id" :key="item.id">{{ item.title }}</Option>
          </Select>
        </FormItem>
        <FormItem label="手机号">
          <Input v-model="addData.mobile" placeholder="手机号"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancelMobile">取消</Button>
        <Button type="primary" :loading="saveLoading" @click="save()">保存</Button>
      </div>
    </Modal>
    <!--导入-->
    <import-data
      title="人员导入"
      :importAjaxUrl="importAjaxUrl"
      :importModal="importDataModal"
      @importBackFun="importBackFun"
      @importSuccessFun="importSuccessFun"
    ></import-data>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import Util from "../../libs/util";
import Utils from "../../libs/mod.utils";
import String from "../../libs/mod.string";
import Modal from "../../libs/mod.Modal";
import Ckeditor from "../../libs/mod.ckeditor";
import importData from "../components/importData.vue";
import util from "@/libs/util.js";
export default {
  name: "userList",
  components: {
    importData
  },
  props: ["dep_id", "get_dep_list", "userListBackFun"],
  data() {
    return {
      uid: "",
      back_id: -1,
      TableHeight: 300,
      total: 0,
      page: 1,
      size: 10,
      id: "",
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          key: "mobile",
          title: "电话",
          align: "center"
        },
        {
          key: "is_admin",
          align: "center",
          title: "是否为管理员",
          render: (h, params) => {
            var is_admin = params.row.is_admin;
            return h("div", [h("span", is_admin ? "是" : "否")]);
          }
        },
        {
          key: "is_charge",
          align: "center",
          title: "是否为负责人",
          render: (h, params) => {
            var is_charge = params.row.is_charge;
            return h("div", [h("span", is_charge ? "是" : "否")]);
          }
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            var is_charge = params.row.is_charge;
            var disabled = is_charge ? true : false;
            var Button1 = h(
              "Button",
              {
                props: {
                  type: "primary",
                  size: "small",
                  disabled: disabled
                },
                style: {},
                on: {
                  click: e => {
                    e.stopPropagation();
                    var data = params.row;
                    this.updateCharge(data);
                  }
                }
              },
              "设为负责人"
            );
            return h("div", [Button1]);
          }
        }
      ],
      data: [],
      dataDetail: {},
      saveLoading: false,
      addCurrentTableData: false,
      ajaxType: "add",
      addData: {
        id: "",
        mobile: "",
        dids: [],
        is_admin: 0
      },
      selectionArr: [],
      depList: [],
      is_adminArr: [
        {
          id: 1,
          title: "是"
        },
        {
          id: 0,
          title: "否"
        }
      ],

      search_name: "",

      importDataModal: false, // 导入
      importAjaxUrl: "/user/importExcel"
    };
  },
  created: function() {
    var _this = this;
  },
  mounted() {
    var _this = this;
    _this.getDepList();
    if (_this.dep_id > 0) {
      _this.getData();
    }
    _this.$nextTick(function() {
      var height = $("#TableCard").height();
      var TableHeight = height - 36 - 32 - 10 - 56 - 51;
      _this.TableHeight = TableHeight;
    });
  },
  watch: {
    dep_id: function() {
      var _this = this;
      if (_this.dep_id > 0) {
        _this.getData();
      }
    },
    get_dep_list: function() {
      var _this = this;
      if (_this.get_dep_list > 0) {
        _this.getDepList();
      }
    }
  },
  methods: {
    // 设置负责人
    updateCharge: function(data) {
      var _this = this;
      var did = _this.dep_id;
      var uid = data.id;
      var data = {
        id: did,
        charge: uid
      };
      var params = {
        url: "/department/update",
        type: Util.method.post,
        data: data,
        success: _successFun
      };
      Util.ajax(_this, params);
      function _successFun(res) {
        if (res.result == 0) {
          _this.getData();
        } else {
          Utils.showToast.error(_this, "设置负责人失败");
        }
      }
    },
    // 部门列表
    getDepList: function() {
      var _this = this;
      var data = {
        page: -1
      };
      var params = {
        url: "/department/list",
        type: Util.method.post,
        data: data,
        success: _successFun
      };
      Util.ajax(_this, params);
      function _successFun(res) {
        if (res.result == 0) {
          var data = res.data || [];
          _this.depList = data;
        } else {
          Utils.showToast.error(_this, "查询部门信息失败");
        }
      }
    },
    // 用户列表
    getData() {
      var _this = this;
      var filter = [];
      var search = [];
      if (_this.dep_id > 0) {
        filter.push({
          did: _this.dep_id
        });
      }
      if (_this.search_name != "") {
        search.push({
          keyWord: _this.search_name,
          logical: "and"
        });
      }
      var data = {
        page: _this.page,
        size: _this.size,
        filter: filter,
        search: search
      };
      var params = {
        url: "/user/list",
        type: Util.method.post,
        data: data,
        success: _successFun
      };
      Util.ajax(_this, params);
      function _successFun(res) {
        if (res.result == 0) {
          var data = res.data || [];
          _this.data = data;
          _this.total = res.rows || 0;
          _this.hideNums();
        } else {
          Utils.showToast.error(_this, "查询人员信息失败");
        }
      }
    },
    changePage: function(page) {
      var _this = this;
      _this.page = page;
      _this.getData();
    },
    onRowData: function(data) {
      var _this = this;
    },
    selectionChange: function(arr) {
      var _this = this;
      _this.selectionArr = arr;
    },
    // 取消
    hideNums: function() {
      var _this = this;
      _this.$refs.selectionTable.selectAll(false);
      _this.selectionArr = [];
      _this.saveLoading = false;
    },
    // 搜索
    searchFun: function() {
      var _this = this;
      _this.page = 1;
      _this.getData();
    },
    // 添加
    addUser: function() {
      var _this = this;
      _this.ajaxType = "add";
      _this.addData.mobile = "";
      _this.addData.dids = [];
      if (_this.dep_id > 0) {
        _this.addData.dids.push(_this.dep_id);
      }
      _this.addData.is_admin = 0;
      _this.addCurrentTableData = true;
    },
    // 修改
    updateFun: function() {
      var _this = this;
      var selectionArr = _this.selectionArr;
      if (selectionArr.length == 0) {
        Utils.showToast.error(_this, "请选择要修改的数据!");
        return false;
      }
      if (selectionArr.length > 1) {
        Utils.showToast.error(_this, "只能修改一条数据!");
        return false;
      }
      var dataObj = selectionArr[0];
      var data = {
        id: dataObj.id
      };
      var params = {
        url: "/user/query",
        type: Util.method.post,
        data: data,
        success: _successFun
      };
      Util.ajax(_this, params);
      function _successFun(res) {
        if (res.result == 0) {
          var userinfo = res.data || {};

          var department = userinfo.department || [];
          var dids = [];
          for (var k in department) {
            if (!department[k]) {
              continue;
            }
            dids.push(department[k].id);
          }
          _this.ajaxType = "update";
          _this.addData.id = userinfo.id || "";
          _this.addData.mobile = userinfo.mobile || "";
          _this.addData.dids = dids;
          _this.addData.is_admin = userinfo.is_admin ? 1 : 0;
          _this.addCurrentTableData = true;
        } else {
          Utils.showToast.error(_this, "查询信息失败!");
        }
      }
    },
    // 删除
    removeUser: function() {
      var _this = this;
      var selectionArr = _this.selectionArr;
      if (selectionArr.length == 0) {
        Utils.showToast.error(_this, "请选择要删除的数据!");
        return false;
      }
      var selectionIds = [];
      for (var k in selectionArr) {
        if (!selectionArr[k]) {
          continue;
        }
        var id = selectionArr[k].id;
        selectionIds.push(id);
      }
      Modal.confirm(
        _this,
        { content: "确定删除选中的信息？" },
        function() {
          var data = {
            ids: selectionIds
          };
          var params = {
            url: "/user/del",
            type: Util.method.post,
            data: data,
            success: _successFun
          };
          Util.ajax(_this, params);
          function _successFun(res) {
            if (res.result == 0) {
              _this.page = 1;
              _this.getData();
            } else {
              Utils.showToast.error(_this, "删除信息失败!");
            }
          }
        },
        function() {}
      );
    },
    // 保存
    save: function() {
      var _this = this;
      var id = _this.addData.id;
      var mobile = _this.addData.mobile;
      var dids = _this.addData.dids;
      var is_admin = _this.addData.is_admin;
      if (dids.length == 0) {
        Utils.showToast.error(_this, "请选择所在部门");
        return false;
      }
      if (mobile == "") {
        Utils.showToast.error(_this, "请输入手机号");
        return false;
      }
      var url = "/user/add";
      if (_this.ajaxType == "update") {
        url = "/user/update";
      }
      var data = {
        id: id,
        dids: dids,
        mobile: mobile,
        is_admin: is_admin > 0 ? true : false
      };
      var params = {
        url: url,
        type: Util.method.post,
        data: data,
        success: _successFun
      };
      Util.ajax(_this, params);
      _this.saveLoading = true;
      function _successFun(res) {
        _this.saveLoading = false;
        if (res.result == 0) {
          _this.page = 1;
          _this.getData();
          _this.cancelMobile();
        } else {
          Utils.showToast.error(_this, "保存信息失败!");
        }
      }
    },
    // 取消编辑
    cancelMobile: function() {
      var _this = this;
      _this.addCurrentTableData = false;
      _this.saveLoading = false;
    },
    // 导入
    importData: function() {
      var _this = this;
      _this.importDataModal = true;
    },
    // 导入关闭
    importBackFun: function() {
      var _this = this;
      _this.importDataModal = false;
    },
    // 导入成功
    importSuccessFun: function() {
      var _this = this;
      _this.page = 1;
      _this.getData();
      _this.$emit("userListBackFun", _this.back_id);
    },
    // 导出
    ExportData: function() {
      var _this = this;
      var fields = [
        {
          field: "name",
          title: "部门名称",
          type: "varchar",
          order: 1
        },
        {
          field: "mobile",
          title: "手机号",
          type: "varchar",
          order: 2
        },
        {
          field: "type",
          title: "部门类型",
          type: "varchar",
          order: 3
        },
        {
          field: "is_admin",
          title: "是否为管理员",
          type: "varchar",
          order: 4
        }
      ];
      var fieldsStr = Util.toStr(fields);
      var data = {};
      Modal.confirm(
        _this,
        { content: "确定要导出全部信息？" },
        function() {
          data = {
            type: "contact",
            fields: fieldsStr
          };
          _getAjax();
        },
        function() {}
      );
      function _getAjax() {
        var params = {
          url: "/file/db2excle",
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
      }

      function _successFun(res) {
        if (res.result == 0) {
          var url = res.data;
          var date = Utils.dateToDateString(new Date());
          Utils.DownloadFile(url, "导出人员信息_" + date + ".xlsx");
        } else {
          Utils.showToast.error(_this, "导出信息失败!");
        }
      }
    }
  }
};
</script>
